<template>
    <view>
        <z-paging ref="paging" v-model="response" @query="queryList">
            <template #top>
                <u-navbar title="退款详情" title-bold>
                    <view slot="right" class="u-m-r-20 o-font-color-error" @click="records">申请记录</view>
                </u-navbar>
            </template>
            <view class="container">
                <view v-if="response.status == 0">
                    <view class="status">
                        <text class="icon icon-warn"></text>
                        <text class="status-title">等待商家处理退款申请</text>
                    </view>
                    <view class="cancel-action">
                        <view class="cancel-action-title">如果商家同意：申请将达成并退款至您的原账户</view>
                        <view class="u-p-y-20">
                            <u-button type="d" @click="cancelRefund">取消退款申请</u-button>
                        </view>
                    </view>
                </view>
                <view v-if="response.status == 2">
                    <view class="status">
                        <text class="icon icon-warn"></text>
                        <text class="status-title">等待商家处理退款申请</text>
                    </view>
                    <view class="cancel-action">
                        <view class="cancel-action-title">如果商家同意：申请将达成并退款至您的原账户</view>
                        <view class="u-p-y-20">
                            <u-button type="d" @click="cancelRefund">取消退款申请</u-button>
                        </view>
                    </view>
                </view>
                <view v-if="response.status == 3">
                    <view class="status">
                        <text class="icon icon-checked"></text>
                        <text class="status-title">退款成功</text>
                    </view>
                </view>
                <view v-if="response.status == 4">
                    <view class="status">
                        <text class="icon icon-error-fill"></text>
                        <text class="status-title">退款失败</text>
                    </view>
                    <view class="status-failed">
                        <view>拒绝原因：<text>商户已拒绝您的退款申请，退款关闭</text></view>
                        <view
                            >拒绝时间：<text>{{ response.updateTime }}</text></view
                        >
                    </view>
                </view>
                <view v-if="response.status == 7">
                    <view class="status">
                        <text class="icon icon-error-fill"></text>
                        <text class="status-title">取消退款 退款关闭</text>
                    </view>
                    <view class="status-failed">
                        <view class="u-text-center"
                            >取消时间：<text>{{ response.updateTime }}</text></view
                        >
                    </view>
                </view>
                <view class="refund-info">
                    <view v-if="response.status != 0"
                        >退款类型：<text>{{ response.typeName }}</text></view
                    >
                    <view
                        >退款金额：<text>￥{{ Number(response.refundTotalAmount || 0).toFixed(2) }}</text></view
                    >
                    <view
                        >退款说明：<text>{{ response.remark }}</text></view
                    >
                    <view
                        >退款编号：<text>{{ response.orderRefundNo }}</text></view
                    >
                    <view>
                        申请人：
                        <text>{{ response.addByType + ' / ' + response.addByName }}</text>
                    </view>
                    <view
                        >申请时间：<text>{{ response.addTime }}</text></view
                    >
                    <view
                        >关联订单号：<text>{{ response.orderId }}</text></view
                    >
                </view>
            </view>
        </z-paging>
        <u-popup v-model="show" mode="bottom">
            <view class="history" @touchmove.stop.prevent>
                <view class="u-text-center o-font-600 u-p-y-20">申请记录</view>
                <u-time-line>
                    <block v-for="(node, index) in timeline" :key="'timeline' + index">
                        <u-time-line-item nodeTop="2">
                            <template v-slot:node v-if="index === 0">
                                <view class="u-node">
                                    <text class="icon" style="color: #ff9900">&#xe650;</text>
                                </view>
                            </template>
                            <template v-slot:content>
                                <view class="u-flex u-row-between">
                                    <view class="u-flex-1">{{ node.appRemark }}</view>
                                    <view class="record-time u-flex-1 u-text-right">{{ node.addTime }}</view>
                                </view>
                            </template>
                        </u-time-line-item>
                    </block>
                </u-time-line>
            </view>
        </u-popup>
        <u-modal v-model="showModal" content="确认要取消退款退货申请?" title="" @confirm="confirm" show-cancel-button></u-modal>
    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const show = ref(false)
const showModal = ref(false)
const response = ref<any>({})
const paging = ref<any>(null)
const timeline = ref<any[]>([])

let id: string | undefined = undefined

onLoad((option: any)=>{
    id = option.id
})

function queryList(){
    uni.$u.$api.OrderApi.queryOrderRefundInfoApp({
        id: id,
    }).then((res: any) => {
        response.value = res;
        paging.value.complete()
    })
    .catch(() => {
        paging.value.complete(false)
    });
}

function confirm() {
    uni.$u.$api.OrderApi.cancelOrderRefund({ id: id }).then(
        () => {
            paging.value.reload()
            uni.$u.toast("取消成功!");
        }
    );
}
function records() {
    show.value = true;
    uni.$u.$api.OrderApi.queryOrderRefundLogListApp({
        orderRefundId: id,
    }).then((res: any[]) => {
        timeline.value = res.reverse();
    });
}

function cancelRefund() {
    showModal.value = true;
}
</script>

<style scoped lang="scss"></style>
